<script setup>

import router from "@/router/index.js";

const onClickLeft = () => {
  router.go(-1)
}

const tagList = [
  { text: "前端" },
  { text: "后端" },
  { text: "UI" },
  { text: "测试" },
  { text: "运维" },
  { text: "前端" },
  { text: "后端" },
  { text: "UI" },
  { text: "测试" },
  { text: "运维" },
  { text: "前端" },
  { text: "后端" },
  { text: "UI" },
  { text: "测试" },
  { text: "运维" },
  { text: "前端" },
  { text: "后端" },
  { text: "UI" },
  { text: "测试" },
  { text: "运维" },
]
</script>

<template>
  <div class="add-tag-page">
    <van-nav-bar
      fixed
      left-arrow
      left-text="返回"
      placeholder
      title="为社区添加标签"
      @click-left="onClickLeft"
    />
    <div class="tag-container">
      <div class="active-tag">
        <div class="title">
          <span>正式标签</span>
          <van-tag type="primary">父标签</van-tag>
          <van-tag type="success">子标签</van-tag>
        </div>
        <div class="tag-list">
          <van-tag v-for="(item,index) in tagList" :key="index" class="tag-item" size="medium" type="primary">
            {{ item.text }}
          </van-tag>
        </div>
      </div>
      <div class="inactive-tag">
        <div class="title">
          <span>审核中</span>
          <van-tag type="primary">父标签</van-tag>
          <van-tag type="success">子标签</van-tag>
        </div>
        <div class="tag-list">
          <van-tag v-for="(item,index) in tagList" :key="index" class="tag-item" size="medium" type="primary">
            {{ item.text }}
          </van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.add-tag-page {
  min-height: 100vh;
  background: #f8f8f8;
}

.tag-container {
  padding: 10px;
}

.active-tag, .inactive-tag {
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}

.active-tag .title span, .inactive-tag .title span {
  margin-right: 5px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
}

.tag-list .tag-item {
  margin-top: 3px;
  margin-right: 3px;
}
</style>
